<template>
  <a-modal
    centered
    :footer="null"
    :width="1000"
    :closable="false"
    v-model="visible"
    @cancel="destory"
  >
    <div class="player" @contextmenu.prevent="show">
      <video-player
        class="vjs-custom-skin"
        ref="videoPlayer"
        :controls="false"
        :options="options"
        @play="onPlay($event)"
        @pause="onPause($event)"
      >
      </video-player>
    </div>
  </a-modal>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import '@/assets/custom-theme.css'

export default {
  props: {
    video: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    videoPlayer
  },
  name: 'PlayerWrapper',
  data () {
    return {
      visible: false,
      options: {
        autoplay: true,
        preload: 'auto',
        fluid: true,
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        notSupportedMessage: '此视频暂时无法播放',
        poster: '',
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          progressControl: false
        }
      },
      lastTime: 0
    }
  },
  created () {
    this.options.sources[0].src = this.video.url
    setTimeout(() => {
      this.visible = true
    }, 300)
  },
  methods: {
    destory () {
      const app = this
      app.$confirm({
        centered: true,
        title: '是否关闭正在播放的视频',
        onOk: () => {
          app.onPause()
          app.options.sources[0].src = ''
          app.options.poster = ''
          app.visible = false
          app.$emit('cancel', app.visible)
        },
        onCancel: () => {
          app.visible = true
          app.onPlay()
        }
      })
    },
    onPlay (player) {
      const mp = this.$refs.videoPlayer.player
      mp.play()
    },
    onPause (player) {
      const mp = this.$refs.videoPlayer.player
      mp.pause()
    },
    show () {
      this.$warning({
        title: '禁止保存视频'
      })
    }
  }
}
</script>

<style scoped>

</style>
